﻿<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description"
        content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
  <meta name="author" content="Coderthemes">

  <link rel="shortcut icon"
        href="assets/images/favicon_1.ico">

  <title>Moltran - Responsive Admin Dashboard Template</title>

  <link href="assets/plugins/modal-effect/css/component.css" rel="stylesheet">
  <!-- DataTables -->
  <link href="assets/plugins/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
  <link href="assets/plugins/datatables/buttons.bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="assets/plugins/datatables/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="assets/plugins/datatables/responsive.bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="assets/plugins/datatables/scroller.bootstrap.min.css" rel="stylesheet" type="text/css" />

  <link
          href="assets/css/bootstrap.min.css"
          rel="stylesheet" type="text/css">
  <link href="assets/css/core.css"
        rel="stylesheet" type="text/css">
  <link href="assets/css/icons.css"
        rel="stylesheet" type="text/css">
  <link
          href="assets/css/components.css"
          rel="stylesheet" type="text/css">
  <link href="assets/css/pages.css"
        rel="stylesheet" type="text/css">
  <link href="assets/css/menu.css"
        rel="stylesheet" type="text/css">
  <link
          href="assets/css/responsive.css"
          rel="stylesheet" type="text/css">

  <script
          src="assets/js/modernizr.min.js"></script>


  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  <![endif]-->

  <style>
    .boxme {
      width: 66px;
      display: inline-block;
      top: 20px;
      padding-top: 10px;
    }
    td,th {
      font-size: 8px;
      text-align: center;
    }
    .f {
      font-size: 16px;
      position: relative;
      padding-left: 5px;
    }
    .f:hover span {
      position: absolute;
      left: 50%;
      width: 40px;
      font-size: 10px;
      text-align: center;
      transform: translate(-50%);
      box-shadow: 0 2px 9px #999;
      background-color: #FFF;
      border-radius: 4px;
      color: #666;
      z-index: 2;
      line-height: 20px;
      height: 20px;
      display: block;
    }
    .f:hover {
      cursor: pointer;
    }
    .f span {
      display: none;
    }

  </style>
</head>


<body class="fixed-left">

<!-- Begin page -->
<div id="wrapper">

  <!-- Top Bar Start -->
  <div class="topbar">
    <!-- LOGO -->
    <div class="topbar-left">
      <div class="text-center">
        <a href="/purchaseOrder" class="logo"><i class="md md-terrain"></i>
          <span>运营后台 </span></a>
      </div>
    </div>
    <!-- Button mobile view to collapse sidebar menu -->
    <div class="navbar navbar-default" role="navigation">
      <div class="container">
        <div class="">
          <div class="pull-left">
            <button class="button-menu-mobile open-left">
              <i class="fa fa-bars"></i>
            </button>
            <span class="clearfix"></span>
          </div>
          <form class="navbar-form pull-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control search-bar"
                     placeholder="Type here for search...">
            </div>
            <button type="submit" class="btn btn-search">
              <i class="fa fa-search"></i>
            </button>
          </form>

          <ul class="nav navbar-nav navbar-right pull-right">
            <li class="dropdown hidden-xs"><a href="#" data-target="#"
                                              class="dropdown-toggle waves-effect" data-toggle="dropdown"
                                              aria-expanded="true"> <i class="md md-notifications"></i>
            </a>
              <ul class="dropdown-menu dropdown-menu-lg">
                <li class="text-center notifi-title">Notification</li>
                <li class="list-group">
                  <!-- list item--> <a href="javascript:void(0);"
                                       class="list-group-item">
                  <div class="media">
                    <div class="pull-left">
                      <em class="fa fa-user-plus fa-2x text-info"></em>
                    </div>
                    <div class="media-body clearfix">
                      <div class="media-heading">New user registered</div>
                      <p class="m-0">
                        <small>You have 10 unread messages</small>
                      </p>
                    </div>
                  </div>
                </a> <!-- list item--> <a href="javascript:void(0);"
                                          class="list-group-item">
                  <div class="media">
                    <div class="pull-left">
                      <em class="fa fa-diamond fa-2x text-primary"></em>
                    </div>
                    <div class="media-body clearfix">
                      <div class="media-heading">New settings</div>
                      <p class="m-0">
                        <small>There are new settings available</small>
                      </p>
                    </div>
                  </div>
                </a> <!-- list item--> <a href="javascript:void(0);"
                                          class="list-group-item">
                  <div class="media">
                    <div class="pull-left">
                      <em class="fa fa-bell-o fa-2x text-danger"></em>
                    </div>
                    <div class="media-body clearfix">
                      <div class="media-heading">Updates</div>
                      <p class="m-0">
                        <small>There are <span class="text-primary">2</span>
                          new updates available
                        </small>
                      </p>
                    </div>
                  </div>
                </a> <!-- last list item --> <a href="javascript:void(0);"
                                                class="list-group-item"> <small>See all
                  notifications</small>
                </a>
                </li>
              </ul>
            </li>
            <li class="hidden-xs"><a href="#" id="btn-fullscreen"
                                     class="waves-effect"><i class="md md-crop-free"></i></a></li>
            <li class="hidden-xs"><a href="#"
                                     class="right-bar-toggle waves-effect"><i class="md md-chat"></i></a>
            </li>
            <li class="dropdown"><a href=""
                                    class="dropdown-toggle profile" data-toggle="dropdown"
                                    aria-expanded="true"><img
                    src="assets/images/users/avatar-1.jpg"
                    alt="user-img" class="img-circle"> </a>
              <ul class="dropdown-menu">
                <li><a href="javascript:void(0)"><i
                        class="md md-face-unlock"></i> Profile</a></li>
                <li><a href="javascript:void(0)"><i
                        class="md md-settings"></i> Settings</a></li>
                <li><a href="javascript:void(0)"><i class="md md-lock"></i>
                  Lock screen</a></li>
                <li><a href="javascript:void(0)"><i
                        class="md md-settings-power"></i> Logout</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!--/.nav-collapse -->
      </div>
    </div>
  </div>
  <!-- Top Bar End -->


  <!-- ========== Left Sidebar Start ========== -->

  <div class="left side-menu">
    <div class="sidebar-inner slimscrollleft">
      <div class="user-details">
        <div class="pull-left">
          <img
                  src="assets/images/users/avatar-1.jpg"
                  alt="" class="thumb-md img-circle">
        </div>
        <div class="user-info">
          <div class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"
               aria-expanded="false">John Doe <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="javascript:void(0)"><i
                      class="md md-face-unlock"></i> Profile
                <div class="ripple-wrapper"></div>
              </a></li>
              <li><a href="javascript:void(0)"><i
                      class="md md-settings"></i> Settings</a></li>
              <li><a href="javascript:void(0)"><i class="md md-lock"></i>
                Lock screen</a></li>
              <li><a href="javascript:void(0)"><i
                      class="md md-settings-power"></i> Logout</a></li>
            </ul>
          </div>

          <p class="text-muted m-0">Administrator</p>
        </div>
      </div>
      <!--- Divider -->
      <div id="sidebar-menu">
        <ul>
          <li class="has_sub"><a href="#"
                                 class="waves-effect waves-light"><i
                  class="md md-now-widgets"></i><span>订单管理</span><span
                  class="pull-right"><i class="md md-add"></i></span></a>
            <ul class="list-unstyled">
              <li><a href="list">提交订单</a></li>
              <li><a href="undev">待处理订单</a></li>
              <li><a href="">采购订单</a></li>
              <li><a href="undev">零售订单列表</a></li>
            </ul>
          </li>
          <li class="has_sub"><a href="#"
                                 class="waves-effect waves-light"><i
                  class="md md-now-widgets"></i><span>售后管理</span><span
                  class="pull-right"><i class="md md-add"></i></span></a>
            <ul class="list-unstyled">
              <li><a href="undev">申请退换货</a></li>
              <li><a href="undev">退货订单列表</a></li>
            </ul>
          </li>
          <li class="has_sub"><a href="#"
                                 class="waves-effect waves-light"><i
                  class="md md-now-widgets"></i><span>产品管理</span><span
                  class="pull-right"><i class="md md-add"></i></span></a>
            <ul class="list-unstyled">
              <li><a href="undev">产品信息查询</a></li>
              <li><a href="undev">库存信息管理</a></li>
            </ul>
          </li>
          <li class="has_sub"><a href="#"
                                 class="waves-effect waves-light"><i
                  class="md md-now-widgets"></i><span>会员信息</span><span
                  class="pull-right"><i class="md md-add"></i></span></a>
            <ul class="list-unstyled">
              <li><a href="undev">会员信息</a></li>
              <li><a href="undev">修改秘密</a></li>
              <li><a href="undev">账户信息</a></li>
              <li><a href="undev">子账号管理</a></li>
            </ul>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
  <!-- Left Sidebar End -->


  <!-- ============================================================== -->
  <!-- Start right Content here -->
  <!-- ============================================================== -->
  <div class="content-page">
    <!-- Start content -->
    <div class="content">
      <div class="container">

        <!-- Page-Title -->
        <div class="row">
          <div class="col-sm-12">
            <h4 class="pull-left page-title">采购订单</h4>
            <ol class="breadcrumb pull-right">
              <li><a href="#">运营后台</a></li>
              <li><a href="#">订单管理</a></li>
              <li class="active">采购订单</li>
            </ol>
          </div>
        </div>


        <!-- End row -->

      </div>
      <!-- container -->

      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading">
<!--              <h3 class="panel-title">Default Example</h3>-->
            </div>
            <div class="panel-body">
              <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                  <div class="table-responsive">
                    <table id="datatable" class="table">
                      <thead>
                      <tr>
                        <th>订单id</th>
                        <th>订单时间</th>
                        <th>销售订单号</th>
                        <th>订单类型</th>
                        <th>订单状态</th>
                        <th>提货方式</th>
                        <th>联系人</th>
                        <th>联系电话</th>
                        <th>数量</th>
                        <th>订单金额</th>
                        <th>区域负责人</th>
                        <th>备注</th>
                        <th>不通过原因</th>
                        <th>操作</th>
                      </tr>
                      </thead>


                      <tbody>
                      <tr th:each="o : ${page.list}">
                        <td>[(${o.oid})]</td>
                        <td>[(${o.stringdate})]</td>
                        <td>[(${o.ordernumber})]</td>
                        <td>[(${o.ordertype})]</td>
                        <td>[(${o.orderstate })]</td>
                        <td>[(${o.deliverymethod})]</td>
                        <td>[(${o.contact})]</td>
                        <td>[(${o.tel})]</td>
                        <td>[(${o.totalnum })]</td>
                        <td>[(${o.totalprice })]</td>
                        <td>[(${o.principal})]</td>
                        <td>[(${o.remarks })]</td>
                        <td>[(${o.failreason})]</td>
                        <td>
                          <span class="boxme"><i class="ion-ios7-albums-outline f"><span>查看</span></i>
                          <i class="ion-edit f" th:onclick="'javascript:update('+${o.oid}+');'"><span>编辑</span></i>
                          <i class="ion-close f" data-toggle="modal" data-target="#custom-width-modal"><span>删除</span></i></span>
                          <div id="custom-width-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none">
                            <div class="modal-dialog" style="width:30%">
                              <div class="modal-content">
                                <div class="modal-header">
                                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                  <h4 class="modal-title" id="custom-width-modalLabel">删除订单</h4>
                                </div>
                                <div class="modal-body">
                                  <p>确认删除该订单吗</p>
                                </div>
                                <div class="modal-footer">
                                  <button type="button" class="btn btn-primary waves-effect waves-light" th:onclick="'javascript:del('+${o.oid}+');'">确认删除</button>
                                  <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">取消</button>
                                </div>
                              </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                          </div>
                        </td>
                      </tr>

                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="col-sm-6">
                <div class="dataTables_info" id="datatable-fixed-header_info"
                     role="status" aria-live="polite">第<span
                        th:text="${page.pageNum }"></span>页 共 <span
                        th:text="${page.total}"></span>
                  条
                </div>
              </div>
              <div class="col-sm-6">
                <div class="dataTables_paginate paging_simple_numbers"
                     id="datatable-fixed-header_paginate"
                     style="text-align: right;">
                  <ul class="pagination">
                    <li class="paginate_button previous"
                        aria-controls="datatable-fixed-header" tabindex="0"
                        id="datatable-fixed-header_previous"><a
                            th:href="@{/purchaseOrder(page=${page.pageNum-1})}">Previous</a>
                    </li>

                    <li class="paginate_button"
                        aria-controls="datatable-fixed-header" tabindex="0"
                        th:each="i:${#numbers.sequence(1, page.pages)}"><a
                            th:href="@{/purchaseOrder(page=${i})}">[(${i})]</a>
                    </li>
                    <li class="paginate_button next"
                        aria-controls="datatable-fixed-header" tabindex="0"
                        id="datatable-fixed-header_next"><a
                            th:href="@{/purchaseOrder(page=${page.pageNum+1})}">Next</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div> <!-- End Row -->

    </div>
    <!-- content -->

    <footer class="footer text-right"> 2015 © Moltran.</footer>

  </div>
  <!-- ============================================================== -->
  <!-- End Right content here -->
  <!-- ============================================================== -->


  <!-- Right Sidebar -->
  <div class="side-bar right-bar nicescroll">
    <h4 class="text-center">Chat</h4>
    <div class="contact-list nicescroll">
      <ul class="list-group contacts-list">
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-1.jpg"
                    alt="">
          </div>
          <span class="name">Chadengle</span> <i
                class="fa fa-circle online"></i>
        </a> <span class="clearfix"></span></li>
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-2.jpg"
                    alt="">
          </div>
          <span class="name">Tomaslau</span> <i
                class="fa fa-circle online"></i>
        </a> <span class="clearfix"></span></li>
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-3.jpg"
                    alt="">
          </div>
          <span class="name">Stillnotdavid</span> <i
                class="fa fa-circle online"></i>
        </a> <span class="clearfix"></span></li>
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-4.jpg"
                    alt="">
          </div>
          <span class="name">Kurafire</span> <i
                class="fa fa-circle online"></i>
        </a> <span class="clearfix"></span></li>
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-5.jpg"
                    alt="">
          </div>
          <span class="name">Shahedk</span> <i class="fa fa-circle away"></i>
        </a> <span class="clearfix"></span></li>
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-6.jpg"
                    alt="">
          </div>
          <span class="name">Adhamdannaway</span> <i
                class="fa fa-circle away"></i>
        </a> <span class="clearfix"></span></li>
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-7.jpg"
                    alt="">
          </div>
          <span class="name">Ok</span> <i class="fa fa-circle away"></i>
        </a> <span class="clearfix"></span></li>
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-8.jpg"
                    alt="">
          </div>
          <span class="name">Arashasghari</span> <i
                class="fa fa-circle offline"></i>
        </a> <span class="clearfix"></span></li>
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-9.jpg"
                    alt="">
          </div>
          <span class="name">Joshaustin</span> <i
                class="fa fa-circle offline"></i>
        </a> <span class="clearfix"></span></li>
        <li class="list-group-item"><a href="#">
          <div class="avatar">
            <img
                    src="assets/images/users/avatar-10.jpg"
                    alt="">
          </div>
          <span class="name">Sortino</span> <i
                class="fa fa-circle offline"></i>
        </a> <span class="clearfix"></span></li>
      </ul>
    </div>
  </div>
  <!-- /Right-bar -->


</div>
<!-- END wrapper -->

<script>
  var resizefunc = [];
</script>

<!-- jQuery  -->
<script
        src="assets/js/jquery.min.js"></script>
<script
        src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script
        src="assets/js/fastclick.js"></script>
<script
        src="assets/js/jquery.slimscroll.js"></script>
<script
        src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script
        src="assets/js/jquery.nicescroll.js"></script>
<script
        src="assets/js/jquery.scrollTo.min.js"></script>

<script
        src="assets/js/jquery.app.js"></script>

<!-- Modal-Effect -->
<script src="assets/plugins/modal-effect/js/classie.js"></script>
<script src="assets/plugins/modal-effect/js/modalEffects.js"></script>

<script type="text/javascript" th:inline="javascript">
  var pageNum = [[${page.pageNum}]];
  $(function (){
    var as = $(".pagination li a");
    $.each(as, function (i, n) {
      var num = $(this).text();
      if (num == pageNum) {
        $(this).parent().addClass('active');
      }
    })
  })
  function del(id) {
    console.log(id)

    $.get("/demo/purchaseOrder/del?id=" + id,
      function (data) {
        //模态框取消
        $('#custom-width-modal').modal('hide');//隐藏modal
        $('.modal-backdrop').remove();//去掉遮罩层
        if (data == 1) {
          location.href = '/demo/purchaseOrder?page=' + pageNum;
        } else {
          alert("删除失败");
        }
      });
  }

  function update(oid) {
    location.href = '/demo/purchaseOrder/' + oid;
  }
</script>

</body>
</html>